<template>
  <div class="container enroll">
    <scroll-view
      class="activity-body"
      :scroll-y="true"
      v-if="loaded"
    >
      <van-cell-group
        custom-class="activity-header van-cell-group-radius"
        :border="false"
      >
        <van-cell
          :title="activity.title"
          custom-class="autofit-cell activity-header-info"
          use-label-slot
        />
      </van-cell-group>
      <!-- 内容详情 -->
      <van-skeleton
        :title="false"
        :row="20"
        :loading="!loaded"
        row-width
        class="skeleton-article-body"
      >
        <div class="richcontent">
          <wxParse
            :content="formatRich"
            @preview="preview"
            @navigate="navigate"
          />
        </div>
      </van-skeleton>
    </scroll-view>
    <page-action v-if="activity.handles && activity.handles.length">
      <van-button
        v-for="(button,index) in activity.handles"
        :key="index"
        plain
        :icon="button.icon"
        type="info"
        @click="onClick(button.mplink)"
      >
        {{ button.text }}
      </van-button>
    </page-action>
  </div>
</template>

<script>
import PageAction from '@/components/action'
import wxParse from 'mpvue-wxparse'
import { getActivityApi } from '@/api'
export default {
  components: {
    PageAction,
    wxParse
  },
  data () {
    return {
      id: 0,
      loaded: false,
      scroll: {
        x: false,
        y: true
      },
      activity: null,
      titleColor: '#000000',
      show: false,
      downloading: false,
      downloadProgress: 0,
      tempFile: '',
      user: null
    }
  },
  onLoad (option) {
    if (option.id) {
      this.id = option.id
    }
  },
  onShow () {
    this.onLoadView()
  },
  computed: {
    formatRich () {
      if (this.activity && this.activity.content) {
        return this.activity.content
      } else {
        return ''
      }
    }
  },
  // 跳转后页面
  mounted () {
    console.log(this.id)
  },
  watch: {
  },
  methods: {
    preview (src, e) {
      // do something
    },
    navigate (href, e) {
      // do something
    },
    onLoadView () {
      getActivityApi(this.id).then((res) => {
        this.activity = res
        this.loaded = true
      })
    },
    onClick (mplink) {
      if (mplink) {
        this.pushNativelink(mplink)
      }
    }
  },
  preview (src, e) {
    // do something
  },
  navigate (href, e) {
    // do something
  },
  onShareAppMessage (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: this.title,
      path: '/pages/activity/main?id=' + this.id + '&from=share'
    }
  }
}
</script>

<style lang="less">
page {
  height: 100%;
}
.activity {
  &-container {
    height: 100%;
    background: #f1f2f4;
  }
  &-needlogin {
    margin: 15px;
    border-radius: 5px;
    padding: 20px 25px;
    background: #fff;
    &__logintips {
      width: 100%;
      height: 100%;
    }
  }
}
.content {
  &-body {
    padding: 10px 15px;
    background: #fff;
    p {
      margin-bottom: 10px;
      &:last-child {
        margin: 0;
      }
    }
    &__paragraph {
      text-indent: 1em;
    }
    &__image {
      image {
        width: 100%;
      }
    }
  }
  &-attach {
    margin: 10px 0;
    &__download {
      .van-cell__value {
        flex: none;
      }
    }
    &__file {
      position: relative;
      .van-progress {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
      }
    }
    &__btn {
      margin-left: 10px;
    }
  }

  &-solutions {
    .solution-cell {
      padding: 15px;
    }
    .solution-extend {
      margin-top: 10px;
      &__owner {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}

.activity-body {
  margin-top: -10px;
}
.activity-header {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  &-info {
    .van-cell__title {
      font-size: 18px;
      font-weight: bold;
    }
    .van-cell__label {
      margin-top: 10px;
    }
    .van-cell__value {
      flex: none;
    }
    .match-rate {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      padding-left: 15px;
      position: relative;
      margin-left: 15px;
      &::before {
        content: "";
        width: 1px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: #f2f3f4;
        transform: scale(0.5, 1);
      }
      &-point {
        font-size: 18px;
        color: coral;
        font-weight: bold;
      }
    }
  }
}
.match-board {
  display: inline-flex;
  align-items: center;
  &-icon {
    background: #1f2322;
    color: #fff;
    border-radius: 3px 0 0 3px;
    padding: 2px 5px;
  }
  &-text {
    color: #333;
    background: #fedab7;
    border-radius: 3px;
    font-size: 12px;
    padding: 2px 5px;
  }
  &-icon + &-text {
    border-radius: 0 3px 3px 0;
  }
}

.van-cell-group__title {
  font-size: 14px !important;
  font-weight: bold !important;
  color: #000 !important;
  padding: 10px 15px !important;
}

.richcontent {
  padding: 10px;
  font-size: 16px;
  .p {
    margin-bottom: 10px;
    color: #333;
  }
}
</style>
